      <template>
        <el-dialog :title="title" :width="width" :visible.sync="dialogBackupsVisible" :close-on-click-modal="false"  @close="closeDialog">
            <el-form :model="selectTable" :rules="rules" ref="selectTable" label-width="200px">
                <el-form-item label="端口传输方式" :required="true" >
                    <el-select v-model="selectTable.vlan" placeholder="请选择端口传输方式" @change="changeTrans(selectTable.vlan)">
                        <el-option key="1" label="ACCESS" value="ACCESS"></el-option>
                        <el-option key="2" label="Trunk" value="Trunk"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Vlan"  :required="true" v-if="isAccess">
                    <el-input v-model="selectTable.name" placeholder="请输入Vlan"></el-input>
                </el-form-item>
                <el-form-item label="ACCESSS vlan" :required="true" v-if="isAccess">
                    <el-input v-model="selectTable.name" placeholder="请输入ACCESSS vlan"></el-input>
                </el-form-item>
                <el-form-item label="ACCESSS 出方向vlan" :required="true" v-if="isAccess">
                    <el-input v-model="selectTable.name" placeholder="请输入ACCESSS 出方向vlan"></el-input>
                </el-form-item>


                <el-form-item label="trunk本地vlan" :required="true" v-if="!isAccess">
                    <el-input v-model="selectTable.name" placeholder="可添加多值，如：1-5,11,12"></el-input>
                </el-form-item>
                <el-form-item label="trunk允许vlan列表" :required="true" v-if="!isAccess">
                    <el-input v-model="selectTable.name" placeholder="可添加多值，如：1-5,11,12"></el-input>
                </el-form-item>
                <el-form-item label="trunk无标签vlan列表"  :required="true" v-if="!isAccess">
                    <el-input v-model="selectTable.name" placeholder="可添加多值，如：1-5,11,12"></el-input>
                </el-form-item>
                <el-form-item label="上行Vlan列表"  :required="true" v-if="!isAccess">
                    <el-input v-model="selectTable.name" placeholder="可添加多值，如：1-5,11,12"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog()">上一步</el-button>
                <el-button type="primary" @click="confirmDialog">确 定</el-button>
            </div>
        </el-dialog>
      </template>
      <script>
      export default {
          data() {
              return {
                  dialogBackupsVisible: this.isShow,
                  isAccess: true,
                  selectTable: {},
                  rules: {
                      date: {
                          required: true,
                          message: '备份操作执行时间', 
                          trigger: 'blur'
                      }
                  }
              }
          },
          props: ['isShow', 'title', 'width'],
          methods: {
            //设置弹窗可见
            closeDialog() {
                this.$emit('closeDialog')
            },
            changeTrans(v) {
                if(v == 'ACCESS') {
                    this.isAccess = true
                } else {
                    this.isAccess = false
                }
            },
            confirmDialog() {}
          }
      }
      </script>
      <style lang="less" scoped>
      
      </style>
      